<script setup lang="ts">
import ExpressionView from './ExpressionView.vue'
import type { StatisticalIndicator } from '@/types/modules/statistical-indicator'

import {
  STORAGE_MODES,
  STORAGE_TYPES,
} from '@/enum/modules/indicator'

const info = defineModel<StatisticalIndicator>({
  required: true,
})

const options = computed(() => {
  const {
    calculationalExpression,
    statisticalExpression,
    indicatorCode,
  } = unref(info)
  return [
    { label: '无', value: STORAGE_TYPES.NONE },
    // 没有采集点点位时，采集方式无效
    {
      label: '采集',
      value: STORAGE_TYPES.COLLECT,
      disabled: !indicatorCode,
    },
    { label: '录入', value: STORAGE_TYPES.ENTRY },
    // 没有计算公式时，计算公式方式无效
    {
      label: '计算公式',
      value: STORAGE_TYPES.CALCULATE,
      disabled: calculationalExpression === '',
    },
    // 没有统计公式时，统计公式方式无效
    {
      label: '统计公式',
      value: STORAGE_TYPES.STATISTIC,
      disabled: statisticalExpression === '',
    },
  ]
})
// 实时没有录入、计算公式、统计公式的数据项
const options1 = unref(options).filter(
  v => ![
    STORAGE_TYPES.ENTRY,
    STORAGE_TYPES.CALCULATE,
    STORAGE_TYPES.STATISTIC,
  ].includes(v.value),
)

/**
 * 为了确保依赖关系，把storage作为参数
 */
function getType(
  x: STORAGE_MODES,
  storage: StatisticalIndicator['storageMode'],
): STORAGE_TYPES {
  const has = (t: STORAGE_MODES[]) => t.includes(x)
  if (has(storage.collect))
    return STORAGE_TYPES.COLLECT
  if (has(storage.entry))
    return STORAGE_TYPES.ENTRY
  if (has(storage.calculate))
    return STORAGE_TYPES.CALCULATE
  if (has(storage.statistic))
    return STORAGE_TYPES.STATISTIC
  return STORAGE_TYPES.NONE
}

function setMode(t: STORAGE_TYPES, x: STORAGE_MODES) {
  switch (t) {
    case STORAGE_TYPES.COLLECT:
      info.value.storageMode.collect.push(x)
      break
    case STORAGE_TYPES.ENTRY:
      info.value.storageMode.entry.push(x)
      break
    case STORAGE_TYPES.CALCULATE:
      info.value.storageMode.calculate.push(x)
      break
    case STORAGE_TYPES.STATISTIC:
      info.value.storageMode.statistic.push(x)
      break
    default:
      break
  }
}

// STORAGE_MODES 切换时从 mode 中剔除
function spliceMode(t: STORAGE_MODES) {
  info.value.storageMode.collect = info.value.storageMode.collect.filter(
    item => item !== t,
  )
  info.value.storageMode.entry = info.value.storageMode.entry.filter(
    item => item !== t,
  )
  info.value.storageMode.calculate = info.value.storageMode.calculate.filter(
    item => item !== t,
  )
  info.value.storageMode.statistic = info.value.storageMode.statistic.filter(
    item => item !== t,
  )
}

// 实时
const now = computed({
  get() {
    const storage = unref(info).storageMode
    return getType(STORAGE_MODES.NOW, storage)
  },
  set(t: STORAGE_TYPES) {
    spliceMode(STORAGE_MODES.NOW)
    setMode(t, STORAGE_MODES.NOW)
  },
})
// 15分钟
const fifteen = computed({
  get() {
    const storage = unref(info).storageMode
    return getType(STORAGE_MODES.FIFTEEN_MINUTES, storage)
  },
  set(t: STORAGE_TYPES) {
    spliceMode(STORAGE_MODES.FIFTEEN_MINUTES)
    setMode(t, STORAGE_MODES.FIFTEEN_MINUTES)
  },
})
// 小时
const hour = computed({
  get() {
    const storage = unref(info).storageMode
    return getType(STORAGE_MODES.HOUR, storage)
  },
  set(t: STORAGE_TYPES) {
    spliceMode(STORAGE_MODES.HOUR)
    setMode(t, STORAGE_MODES.HOUR)
  },
})
// 日
const day = computed({
  get() {
    const storage = unref(info).storageMode
    return getType(STORAGE_MODES.DAY, storage)
  },
  set(t: STORAGE_TYPES) {
    spliceMode(STORAGE_MODES.DAY)
    setMode(t, STORAGE_MODES.DAY)
  },
})
// 月
const month = computed({
  get() {
    const storage = unref(info).storageMode
    return getType(STORAGE_MODES.MONTH, storage)
  },
  set(t: STORAGE_TYPES) {
    spliceMode(STORAGE_MODES.MONTH)
    setMode(t, STORAGE_MODES.MONTH)
  },
})
// 年
const year = computed({
  get() {
    const storage = unref(info).storageMode
    return getType(STORAGE_MODES.YEAR, storage)
  },
  set(t: STORAGE_TYPES) {
    spliceMode(STORAGE_MODES.YEAR)
    setMode(t, STORAGE_MODES.YEAR)
  },
})
</script>

<template>
  <div class="padding-xs indicator-data-storage">
    <ElDescriptions
      class="indicator-info"
      title="指标基本信息"
      :column="2"
      border
    >
      <ElDescriptionsItem label="用能单元">
        {{ info.pointName
        }}{{
          info.pointCode ? `（${info.pointCode}）` : ''
        }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="指标名称">
        {{ info.indicatorName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="指标编码" :span="2">
        {{ info.indicatorNumber }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="计量单位">
        {{ info.unitName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="采集点点位">
        {{ info.indicatorCode }}
      </ElDescriptionsItem>
    </ElDescriptions>
    <div
      class="width-fill margin-top-sm expression-collapse flex flex-wrap"
    >
      <ElCollapse
        v-if="
          info.expressionType.includes(1)
            && info.calculationalExpression
        "
        class="width-1/2"
      >
        <ElCollapseItem name="1">
          <template #title>
            <strong class="el-descriptions__title">
              计算公式
            </strong>
          </template>
          <ExpressionView
            :expression="info.calculationalExpression"
          />
        </ElCollapseItem>
      </ElCollapse>
      <ElCollapse
        v-if="
          info.expressionType.includes(2)
            && info.statisticalExpression
        "
        class="width-1/2"
      >
        <ElCollapseItem name="2">
          <template #title>
            <strong class="el-descriptions__title">
              统计公式
            </strong>
          </template>
          <ExpressionView
            :expression="info.statisticalExpression"
          />
        </ElCollapseItem>
      </ElCollapse>
    </div>
    <div class="margin-top-sm">
      <ElDescriptions
        class="data-storage"
        title="数据存储"
        :column="1"
        border
      >
        <ElDescriptionsItem label="实时">
          <ElRadioGroup v-model="now">
            <ElRadio
              v-for="item in options1"
              :key="item.value"
              :value="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </ElRadio>
          </ElRadioGroup>
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="false" label="15分钟">
          <ElRadioGroup v-model="fifteen">
            <ElRadio
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </ElRadio>
          </ElRadioGroup>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="小时">
          <ElRadioGroup v-model="hour">
            <ElRadio
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </ElRadio>
          </ElRadioGroup>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="日">
          <ElRadioGroup v-model="day">
            <ElRadio
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </ElRadio>
          </ElRadioGroup>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="月">
          <ElRadioGroup v-model="month">
            <ElRadio
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </ElRadio>
          </ElRadioGroup>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="年">
          <ElRadioGroup
            v-model="year"
            style="--el-radio-height: 23px"
          >
            <ElRadio
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </ElRadio>
          </ElRadioGroup>
        </ElDescriptionsItem>
      </ElDescriptions>
    </div>
  </div>
</template>

<style scoped lang="scss">
.indicator-data-storage {
  :deep(.el-collapse) {
    flex: 1;
    border: none;
  }
}
.expression-collapse {
  :deep(.el-collapse) {
    &:first-child {
      margin-right: 20px;
    }
  }
}
.indicator-info {
  :deep(.el-descriptions__table td) {
    &:nth-child(2n) {
      min-width: 230px;
    }
  }
}
.data-storage {
  :deep(.el-radio) {
    height: 26px;
    margin-right: 50px;
    &:first-child {
      margin-left: 30px;
    }
  }
  :deep(.el-descriptions__table td) {
    &:first-child {
      text-align: center;
    }
  }
}
</style>
